<template>
  <div class="app-container">
    <!-- 分区卡片区域 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col v-for="(zone, index) in zones" :key="index" :span="8">
        <el-card shadow="hover" style="border-radius: 8px; background-color: #f9f9f9;">
          <div class="zone-header" style="text-align: center; font-weight: bold; color: #339933; margin-bottom: 10px;">
            {{ zone.title }}
          </div>
          <div class="image-placeholder" style="height: 120px; background-color: #e6f7e6; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
            高光谱图像区域
          </div>
          <div class="metrics" style="display: flex; justify-content: space-between; padding: 10px 0;">
            <div style="text-align: center;">
              <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.gndvi }}</div>
              <div style="font-size: 12px; color: #666;">GNDVI</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.moisture }}%</div>
              <div style="font-size: 12px; color: #666;">土壤湿度</div>
            </div>
          </div>
          <div class="water-need" style="color: #339933; font-size: 16px; font-weight: bold; margin: 10px 0;">
            需水量: {{ zone.waterNeed }} m³
          </div>
          <el-button type="success" size="small" @click="viewDetail(index)">查看详情</el-button>
        </el-card>
      </el-col>
    </el-row>

    <!-- 灌溉决策详情 -->
    <el-card shadow="hover" style="border-radius: 8px; margin-top: 20px;">
      <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
        <span style="color: #339933; font-weight: bold;">灌溉决策详情</span>
        <el-button type="success" size="small">导出灌溉计划</el-button>
      </div>

      <div style="display: flex; gap: 20px;">
        <!-- 处方图可视化区域 -->
        <div style="flex: 3; height: 300px; background-color: #e6f7e6; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
          处方图可视化区域
        </div>

        <!-- 灌溉量汇总 -->
        <div style="flex: 1; padding: 20px; background-color: #f9f9f9; border-radius: 4px;">
          <div style="font-weight: bold; color: #339933; margin-bottom: 10px;">灌溉量汇总</div>
          <div v-for="(zone, index) in zones" :key="index" style="margin-bottom: 10px;">
            <div style="display: flex; justify-content: space-between;">
              <span>{{ zone.scene }}</span>
              <span>{{ zone.waterNeed }} m³</span>
            </div>
          </div>
          <div style="border-top: 2px solid #339933; margin-top: 15px; padding-top: 10px; font-weight: bold; color: #339933;">
            总需水量 {{ totalWater }} m³
          </div>
          <el-button type="success" style="width: 100%; margin-top: 10px;" @click="executePlan">执行灌溉计划</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zones: [
        {
          'id': 5,
          'deviceId': 'a3a4f9f3985d46c2813d1d2252272f84',
          'deviceName': '高光谱东向西',
          'scene': '场景3',
          'code': 'ES3',
          'vegetation': 'GNDVI',
          'vegetationNum': 0.6000000238418579,
          'status': '良',
          'device_time': '2025-06-06 10:06:51',
          'colorizePic': 'http://111.198.10.9:6120/pic?3da88444fc7do-cfl*61-e04o2=9140*0l2=0201*1004449=2147**tps==611b*=a28c*941fd923b-a20540-4pi184o=92030=91b',
          'visibleImage': 'http://111.198.10.9:6120/pic?3da88444fc7do-cfl*71-e76o2=6113*8l4=0801*1004449=2187**tps==610b*=a28c*941fd923b-a24040-4pi184o=92030=91b',
          'lat': 40.13309860229492,
          'lon': 116.35530090332031,
          'create_time': 1750064253,
          water
        },
        {
          'id': 10,
          'deviceId': 'a3a4f9f3985d46c2813d1d2252272f84',
          'deviceName': '高光谱东向西',
          'scene': '场景2',
          'code': 'ES2',
          'vegetation': 'GNDVI',
          'vegetationNum': 0.6000000238418579,
          'status': '良',
          'device_time': '2025-06-06 10:04:20',
          'colorizePic': 'http://111.198.10.9:6120/pic?3da88444fc7do-cfl*01-e85o2=0198*0l3=0106*0004429=2147**tps==515b*=a28c*941fd929b-a25240-2pi184o=92030=91b',
          'visibleImage': 'http://111.198.10.9:6120/pic?3d19=b490i02-=o381ap3904d524-bc29af1b9*582s=**817===pt4*7012692040l0*2092=1o5*43e-=0*2fc6od1cfl44-8a8743',
          'lat': 40.13330078125,
          'lon': 116.35530090332031,
          'create_time': 1750064253
        },
        {
          'id': 15,
          'deviceId': 'a3a4f9f3985d46c2813d1d2252272f84',
          'deviceName': '高光谱东向西',
          'scene': '场景1',
          'code': 'ES1',
          'vegetation': 'GNDVI',
          'vegetationNum': 0.6000000238418579,
          'status': '良',
          'device_time': '2025-06-06 10:01:49',
          'colorizePic': 'http://111.198.10.9:6120/pic?3d19=b490i02-=o081ap8604d624-bc29af1b9*582s=**415==tp*7712=9144009*0010=6l5*7057=2o88e-18*lfc-od7cf44488a3',
          'visibleImage': 'http://111.198.10.9:6120/pic?3da88444fc7do-cfl*31-e87o2=3280*7=0100*9l0401902107*4t==413**ps2=5*4b1=a98cb942fd4260-a178o0-2pi084b=91=093',
          'lat': 40.13349914550781,
          'lon': 116.3552017211914,
          'create_time': 1750064253
        }
      ]
    }
  },
  computed: {
    totalWater() {
      return this.zones.reduce((sum, zone) => sum + parseInt(zone.waterNeed), 0)
    }
  },
  methods: {
    viewDetail(index) {
      console.log('查看分区', index + 1, '详情')
    },
    executePlan() {
      this.$message.success('灌溉计划已执行！')
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
